<template>
	<div class="registration-container">
		<Header />
		<div class="registration-box">
			<h2 class="registration-title">注册今生永恒墓园用户</h2>

			<el-form :model="registerForm" :rules="rules" ref="registerFormRef" label-width="120px"
				class="registration-form">


				<el-form-item label="手机号" prop="account">
					<el-input v-model="registerForm.account" placeholder="请输入手机号"></el-input>
				</el-form-item>

				<!-- <el-form-item label="验证码" prop="verificationCode">
					<div class="verification-code-input">
						<el-input v-model="registerForm.verificationCode" placeholder="请输入验证码"></el-input>
						<el-button type="primary" :disabled="isSendingCode" @click="getVerificationCode">
							{{ codeButtonText }}
						</el-button>
					</div>
				</el-form-item> -->

				<el-form-item label="登录密码" prop="password">
					<el-input type="password" v-model="registerForm.password" placeholder="请输入登录密码"
						show-password></el-input>
				</el-form-item>
				<el-form-item label="确认密码" prop="password_confirm">
					<el-input type="password" v-model="registerForm.password_confirm" placeholder="请再次输入登录密码"
						show-password></el-input>
				</el-form-item>
				<el-form-item label="昵称" prop="nickname">
					<el-input v-model="registerForm.nickname" placeholder="请输入昵称" ></el-input>
				</el-form-item>
				<!-- <el-form-item label="头像" prop="avatar">
					<material-picker v-model="registerForm.avatar" :limit="1" />
				</el-form-item> -->
				<div class="section-title">
					<span>墓园用户资料填写</span>
					<el-checkbox v-model="isEnabled" label="暂不填写" style="margin-left: 20px;"/>
				</div>
			</el-form>
			<el-form v-if="!isEnabled" :model="registerForm2" ref="registerFormRef2" label-width="120px"
				class="registration-formTwo">

				<el-form-item label="真实姓名" prop="real_name">
					<el-input v-model="registerForm2.real_name" placeholder="请输入真实姓名"></el-input>
				</el-form-item>

				<el-form-item label="性别" prop="sex">
					<el-select v-model="registerForm2.sex" placeholder="请选择性别" style="width: 100%;">
						<el-option label="男" value="male"></el-option>
						<el-option label="女" value="female"></el-option>
						<el-option label="保密" value="secret"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="身份证证件号" prop="id_card">
					<el-input v-model="registerForm2.id_card" placeholder="请输入身份证证件号"></el-input>
				</el-form-item>
				<el-form-item label="邮箱地址" prop="email">
					<el-input v-model="registerForm2.email" placeholder="请输入邮箱地址"></el-input>
				</el-form-item>

				<el-form-item label="联系地址" prop="address">
					<el-input v-model="registerForm2.address" placeholder="请输入联系地址"></el-input>
				</el-form-item>

				<el-form-item label="邮政编码" prop="post_code">
					<el-input v-model="registerForm2.post_code" placeholder="请输入邮政编码"></el-input>
				</el-form-item>
			</el-form>
			<div>
				<el-checkbox v-model="agreement">
					<span class="agreement-text">我已阅读并同意</span>
					<a href="#" class="agreement-link">《今生永恒墓园用户协议》</a>
					<span class="agreement-text">及</span>
					<a href="#" class="agreement-link">《隐私条款》</a>
				</el-checkbox>
			</div>
			<div class="subBtn">
				<el-button type="danger" class="submit-button" @click="submitForm">提交注册</el-button>
			</div>
			
		</div>
		<Footer />
	</div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';
import type { FormInstance, FormRules } from 'element-plus';
import { ElMessage } from 'element-plus'; // 如果需要提示信息
import { useRouter } from 'vue-router';
const router = useRouter();
import useUserStore from '@/stores/modules/user';
const isEnabled = ref(false);
const agreement = ref(false);
// 表单数据模型
interface RegisterForm {
	nickname: string;
	account: string;
	// verificationCode: string;
	password: string;
	password_confirm: string;
	// avatar: string;
	channel: string;
}

const registerFormRef = ref<FormInstance>();

const registerForm = reactive<RegisterForm>({
	nickname: '',
	account: '',
	// verificationCode: '',
	password: '',
	password_confirm: '',
	// avatar: '',
	channel: '4'
});
const rules = reactive<FormRules<typeof registerForm>>({
	nickname: [
		{ required: true, message: '请输入用户名', trigger: 'blur' },
		{ min: 3, max: 15, message: '用户名长度在 3 到 15 个字符', trigger: 'blur' },
	],
	account: [
		{ required: true, message: '请输入手机号', trigger: 'blur' },
		{ pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' },
	],
	// verificationCode: [
	// 	{ required: true, message: '请输入验证码', trigger: 'blur' },
	// 	{ len: 6, message: '验证码通常为6位', trigger: 'blur' }, // 示例：假设验证码是6位
	// ],
	password: [
		{ required: true, message: '请输入登录密码', trigger: 'blur' },
		{ min: 6, max: 20, message: '密码长度在 6 到 20 个字符', trigger: 'blur' },
	],
	password_confirm: [
		{ required: true, message: '请再次输入登录密码', trigger: 'blur' },
		{
			validator: (rule, value, callback) => {
				if (value !== registerForm.password) {
					callback(new Error('两次输入的密码不一致'));
				} else {
					callback();
				}
			},
			trigger: 'blur',
		},
	],
});

interface RegisterForm2 {
	real_name: string;
	mobile: string;
	email: string; // 或 Date 如果使用日期选择器
	id_card: string;
	sex: string;
	post_code: string;
	address: string;
}
const registerFormRef2 = ref<FormInstance>();
const registerForm2 = reactive<RegisterForm2>({
	real_name: '',
	mobile: '',
	sex: '',
	id_card: '',
	email: '',
	address: '',
	post_code: '',
});

// 表单验证规则 (基础示例，可根据实际需求完善)

// 获取验证码按钮状态和文本
const isSendingCode = ref(false);
const codeButtonText = ref('获取验证码');
const countdown = ref(60); // 倒计时秒数
let timer: number | any | null = null;

const getVerificationCode = () => {
	// 简单的手机号格式校验
	if (!registerForm.account || !/^1[3-9]\d{9}$/.test(registerForm.account)) {
		ElMessage.warning('请先输入正确的手机号');
		return;
	}

	isSendingCode.value = true;
	codeButtonText.value = `${countdown.value}s 后重发`;

	// 模拟发送验证码的异步操作
	console.log(`正在向 ${registerForm.account} 发送验证码...`);

	timer = setInterval(() => {
		countdown.value--;
		codeButtonText.value = `${countdown.value}s 后重发`;

		if (countdown.value <= 0) {
			clearInterval(timer!);
			timer = null;
			isSendingCode.value = false;
			codeButtonText.value = '获取验证码';
			countdown.value = 60; // 重置倒计时
		}
	}, 1000);

	// 实际应用中，这里会调用 API 发送验证码
	// 成功或失败后需要根据结果处理 isSendingCode 和 timer
};

// 提交表单
const submitForm = async () => {
	if (!agreement.value) {
		ElMessage.error('请先同意协议');
		return
	}
	if (!registerFormRef.value) return;
	try {
		// 触发所有表单项的验证
		await registerFormRef.value.validate();

		// 如果验证通过，执行提交逻辑
		console.log('表单验证通过，准备提交:', registerForm);

		// 在这里执行实际的注册 API 调用
		// const response = await api.register(registerForm);
		// ElMessage.success('注册成功！');
		// 重置表单
		// registerFormRef.value.resetFields();
		const userStore = useUserStore()
		await userStore.register({...registerForm, ...registerForm2});

		// 跳转到首页
		router.push('/');
	} catch (error) {
		// 验证失败或提交失败
		console.error('表单验证失败或提交出错:', error);
		// ElMessage.error('注册失败，请检查填写的信息');
	}
};

// 组件卸载时清除定时器
import { onUnmounted } from 'vue';
import { use } from 'echarts/core';
onUnmounted(() => {
	if (timer) {
		clearInterval(timer);
	}
});

</script>

<style scoped>
.registration-container {
	display: flex;
	flex-flow: column;
	justify-content: center;
	/* 水平居中 */
	/* padding: 40px 20px;  */
	/* 增加垂直内边距 */
	background-color: #f0f2f5;
	/* 页面背景色，模拟截图 */
	/* min-height: calc(100vh); */
			/* 头部高度 */
			/* 底部高度 */
		
	/* 确保内容区至少填满视口高度 */
	box-sizing: border-box;
}

.registration-box {
	width: 100%;
	max-width: 600px;
	/* 控制表单容器的最大宽度 */
	background-color: #fff;
	/* 表单区域背景色 */
	padding: 30px;
	border-radius: 8px;
	box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
	/* 添加阴影 */
	box-sizing: border-box;
	margin: 0 auto;
	margin-top: 20px;
}

.registration-title {
	font-size: 24px;
	font-weight: bold;
	text-align: center;
	margin-bottom: 30px;
	color: #333;
}

.registration-form {
	/* Element Plus 的 el-form 默认就是 flex 布局，这里主要调整 label 的宽度 */
	/* label-width="120px" 属性已经设置了 label 的宽度 */
}

/* 验证码输入框和按钮的容器 */
.verification-code-input {
	display: flex;
	align-items: center;
	/* 垂直居中对齐 */
	gap: 10px;
	/* 输入框和按钮之间的间隔 */
	width: 100%;
	/* 确保容器占满父元素宽度 */
}

.verification-code-input .el-input {
	flex-grow: 1;
	/* 输入框占据剩余空间 */
}

.verification-code-input .el-button {
	flex-shrink: 0;
	/* 按钮不缩小 */
}


/* 资料填写部分的标题 */
.section-title {
	font-size: 18px;
	font-weight: bold;
	color: #555;
	margin: 20px 0 15px 0;
	padding-bottom: 5px;
	border-bottom: 1px solid #eee;
}

/* 协议条款的样式 */
.agreement-item .el-form-item__content {
	/* 调整 agreement 项的布局，使其内容可以靠左 */
	/* Element Plus 默认会将内容放在 label 后，这里需要调整 */
	margin-left: 0 !important;
	/* 清除 Element Plus 默认的左外边距 */
	display: flex;
	align-items: center;
	justify-content: center;
	/* 让复选框及文字整体居中 */
	flex-wrap: wrap;
	/* 允许文字换行 */
}

.agreement-text {
	font-size: 14px;
	color: #666;
}

.agreement-link {
	font-size: 14px;
	color: #409EFF;
	/* Element Plus 主题色 */
	text-decoration: none;
	margin: 0 4px;
	/* 链接与文字之间的间隔 */
}

.agreement-link:hover {
	text-decoration: underline;
}

/* 提交按钮样式 */
.submit-button {
	width: 100%;
	/* 按钮宽度占满 */
	margin-top: 20px;
}

/* 响应式调整 */
@media (max-width: 768px) {
	.registration-box {
		padding: 20px;
		/* 减小内边距 */
	}

	.registration-title {
		font-size: 20px;
		/* 减小标题字体 */
	}

	.registration-form {
		label-width: 80px !important;
		/* 小屏幕下减小 label 宽度 */
	}

	.agreement-item .el-form-item__content {
		justify-content: flex-start;
		/* 小屏幕下协议文字靠左 */
	}

	.agreement-text,
	.agreement-link {
		font-size: 13px;
		/* 减小字体大小 */
	}
}
</style>